<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.css" rel="stylesheet">
</head>
<body>
  <div id="app">
    商品名称
    <input type="text" class="form-control">
    商品价格
    <input type="text" class="form-control">
    购买数量
    <input type="text" class="form-control">
    <button class="btn">添加到购物车</button>
    <div class="center-block" style="max-width:600px">
      <table class="table table-bordered table-striped table-hover table-condensed">
        <tr>
          <th>
            商品名称
          </th>
          <th>价格</th>
          <th>件数</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in items">
          <td>
            <input 
              v-model="item.isChecked" 
              @change="cancelChecked"
              type="checkbox">
            {{ item.itemName }}
          </td>
          <td>
            {{ item.itemPrice }}
          </td>
          <td>
            <button class="btn btn-danger btn-xs"
              @click="reduceNum(index)"
            >-</button>
            <span>{{item.itemNum}}</span>
            <button class="btn btn-danger btn-xs"
              @click="addNum(index)"
            >+</button>
          </td>
          <td>
            ￥{{ (item.itemPrice*item.itemNum).toFixed(2) }}
          </td>
          <td>
            <button 
              @click="delItem(index)"
              class="btn btn-sm btn-warning">删除</button>
          </td>
        </tr>
        <tr  v-if="!items.length">
          <td colspan="5" class="text-center">
            购物车空了，请前往xxx添加
          </td>
        </tr>
        <tr>
          <td colspan="5">
            全选
            <input type="checkbox"
              @change="allCheckedChange"
              v-model="allChecked">
            总价格:￥ {{total}}
          </td>
        </tr>
      </table>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el:"#app",
      data: {
        allChecked:true , //全选状态
        total: 10, //总价格
        items: [ //所以商品
          {
            itemName: '商品a',
            itemPrice: 12.5,
            itemNum: 10,
            isChecked: true
          },
          {
            itemName: '商品b',
            itemPrice: 90.5,
            itemNum: 2,
            isChecked: true
          },
          {
            itemName: '商品c',
            itemPrice: 35.5,
            itemNum: 5,
            isChecked: true
          },
          {
            itemName: '商品d',
            itemPrice: 160,
            itemNum: 6,
            isChecked: true
          }
        ]
      },
      mounted(){
        this.calcTotal();
      },
      methods: {
        allCheckedChange () {
          // 点击全选按钮
          console.log(this.allChecked)
          // 点击事件 在change事件之前发生的，即点击触发是，数据还未改变
          // 改变，每个商品状态
          this.items.forEach(item=>{ item.isChecked = this.allChecked });
          this.calcTotal();
        },
        cancelChecked () {
          /* 
          判断是否所以的商品都选中，
          是： 全选选中
          否： 全选取消选中
           */
          let isAllChecked = this.items.every(item=>item.isChecked)
          /* 
          var isAllChecked = this.items.every(function(item){
            return item.isChecked
          })
           */
          this.allChecked = isAllChecked;
          this.calcTotal();
        },
        delItem (index) {
          // 删除商品
          if (confirm('您确认删除吗?')) {
            this.items.splice(index, 1);
            this.calcTotal();
          }
        },
        reduceNum (index) {
          // 减少商品数量
          this.items[index].itemNum--;
          // num值限制
          if(this.items[index].itemNum <= 1){
            this.items[index].itemNum = 1;
          }
           // 重新计算总价格
           this.calcTotal();
        },
        addNum (index) {
          // 增加商品数量
          this.items[index].itemNum++;
          // 重新计算总价格
          this.calcTotal();
        },
        calcTotal () {
          // 计算总价格 函数
          /* 
          所有选中商品单价*数量的总和
           */
          //  过滤得到所有选中商品
          const checkItems = this.items.filter(item=>item.isChecked);
          /* 
          var checkItems = this.items.filter(function(el){
            return el.isChecked
          })
           */
          let total = 0; 
          checkItems.forEach((item)=>{
            total += item.itemPrice*item.itemNum
          })
          this.total = parseFloat(total.toFixed(2));
         
        }
      }
    })

    // vm.calcTotal();
  </script>
</body>
</html>